<template>
  <div class="login-page">

    <div class="login-box">
      <div class="title">推广员登录系统</div>
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          class="demo-ruleForm"
        >
          <el-form-item prop="phone" class="form-item">
            <el-input
              type="text"
              placeholder="请输入手机号"
              v-model="ruleForm2.phone"
              auto-complete="off"
              class="input-box"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" class="form-item">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="ruleForm2.password"
              auto-complete="off"
              class="input-box"
            ></el-input>
          </el-form-item>
          <button class="login-btn" @click.prevent="loginForm()">登 录</button>
        </el-form>
    </div>
  </div>
</template>

<script>
import yzma from '../../components/yzma'
import { apiLogin } from '../../request/api';
export default {
  name: "Login",
	components:{
		yzma:yzma
	},
  data() {
    return {
      // 登录表单的数据绑定对象
      ruleForm2: {
        phone: "",
        password: "",
      },
      // 这是表单额验证规则对象
      rules2: {
        // 验证手机号是否合法
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "手机长度在 6-15 个字符",
            trigger: "blur"
          }
        ],
        // 验证密码
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码长度在 6 -15 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },

  methods: {
    loginForm() {

      // 自定义验证规则
      this.$refs.ruleForm2.validate(async valid => {
        if (!valid) return;
            apiLogin({
                phone: this.ruleForm2.phone,
                password: this.ruleForm2.password,
            }).then(res =>{
                if (res.code == 1)
                {
                   this.$message.success("登录成功");
                    // 将登录成功的token保存到本地存储
                    window.sessionStorage.setItem("uid", res.uid);
                    window.sessionStorage.setItem("token", res.token);
                    window.sessionStorage.setItem("userPhone", this.ruleForm2.phone);
                    window.sessionStorage.setItem("userPassword", this.ruleForm2.password);
                    this.$router.push("/home");
                } else {
                  console.log(res.msg)
                  this.$message.error(res.msg);
                }

            })
      });
    }
    // loginForm() {

    //   // 自定义验证规则
    //   this.$refs.ruleForm2.validate(async valid => {
    //     if (!valid) return;
    //     // 向后台发起验证
				// if(this.yzhengma != true){
				// 	this.$message.error("验证失败!!");
				// 	return;
				// }

				// // 记住密码
				// if (this.checked == true) {
				//   window.localStorage.setItem("user", JSON.stringify(this.ruleForm2));
				// }else{
				// 	window.localStorage.removeItem("user")
				// }

    //     var { data: res } = await this.$http.get("pos.php/login/login", {
    //       params: {
    //         posphone: this.ruleForm2.phone,
    //         pospassword: this.ruleForm2.password,
    //         code: this.ruleForm2.code
    //       }
    //     });

    //     if (res.status != "success") return this.$message.error(res.code == '6'? '登录出现问题' : res.msg);
    //     this.$message.success("登录成功");
    //     // 将登录成功的token保存到本地存储
    //     window.sessionStorage.setItem("token", res.token);
				// console.log(this.ruleForm2.phone)
    //     window.sessionStorage.setItem("username", this.ruleForm2.phone);
    //     this.$router.push("/home");
    //   });
    // }
  },
  // 记住密码渲染到input
  created() {
    let user1 = window.localStorage.getItem("user");
    let user = JSON.parse(user1);
    if (user1) {
      this.ruleForm2.phone = user.phone;
      this.ruleForm2.password = user.password;
      return;
    }
  }
};
</script>
<style  lang="less" scoped>

.login-page {
  width: 100vw;
  height:100vh;
  font-family: 'Open Sans', sans-serif;
  background: #092756;
  background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
  background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
  background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
  background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
  background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );

}
.title {
  font-size: 26px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 32px;
}
.login-box{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width:300px;
    height:300px;
    .demo-ruleForm .el-form-item,.form-item /deep/.el-form-item__content {
      width: 100%;
    }
    .el-form-item {
      margin-left: 0;
      margin-bottom: 16px;
      /deep/ .el-form-item__content .el-form-item__error {
        top: 90%!important;
      }
    }
    .input-box /deep/ .el-input__inner{
      width: 100%;
      margin-bottom: 10px;
      background: rgba(0,0,0,0.3)!important;
      border: none;
      outline: none;
      padding: 10px;
      font-size: 13px;
      color: #fff;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
      border: 1px solid rgba(0,0,0,0.3);
      border-radius: 4px;
      box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
      -webkit-transition: box-shadow .5s ease;
      -moz-transition: box-shadow .5s ease;
      -o-transition: box-shadow .5s ease;
      -ms-transition: box-shadow .5s ease;
      transition: box-shadow .5s ease;

    }
    .input-box /deep/.el-input__prefix, .input-box /deep/ .el-input__suffix {
        height: 85%;
    }
   
    .input-box /deep/ .el-input__inner:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
    .login-btn {
      padding: 9px 14px;
      font-size: 15px;
      line-height: normal;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      background: @themeColor;
      border: 1px solid #3762bc;
      color: #FFFFFF;
      width: 300px;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
    }
  }

</style>
